<template>
  <div>
    <el-form :model="RegisterForm" label-position="left" :rules="rules" ref="RegisterForm" label-width="6em"
             class="RegisterForm pe-5">
      <el-form-item label="账号：" prop="account">
        <el-input type="text" v-model="RegisterForm.account" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="pwd">
        <el-input type="password" v-model="RegisterForm.pwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmPwd">
        <el-input type="password" v-model="RegisterForm.confirmPwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item class="RegisterBtn">
        <el-button  type="primary"  @click="RegisterBtnClick('RegisterForm')">注册</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import user from "../api/user";

export default {
  name: "register",
  created() {
  },
  mounted() {

  },
  data() {
    // 自定义验证规则
    const checkPwd = (rules, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.RegisterForm.pwd) {
        callback(new Error("两次密码不一致"))
      } else {
        callback()
      }
    }
    return {
      school: '',
      major: '',
      majorChildren: '',
      // 表单数据
      RegisterForm: {
        account: '',
        pwd: '',
        confirmPwd: '',
      },
      // 数据验证规则
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {max: 12, message: '账号不正确', trigger: 'blur'}
        ],
        pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 20, message: '请输入8-20位密码', trigger: 'blur'}
        ],
        confirmPwd: [{validator: checkPwd, trigger: 'blur'}]
      }
    }
  },
  methods: {
    //注册
    RegisterBtnClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const Sno = this.RegisterForm.account
          const param = {account: Sno}
          const loading = this.$loading({
            lock: true,
            text: '注册中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          user.GetUserInfoAccount(param).then(r => {
            if (r.data.status === "200" && (r.data.data.account === null || r.data.data.account === "")) {
              user.GetPublicKey().then(r => {
                // 获取公钥和id字段
                const {publicKey, id} = r.data.data
                let param = {...this.RegisterForm}
                // eslint-disable-next-line no-undef
                const key = new NodeRSA({b: 512})
                key.importKey(publicKey, "pkcs1-public")
                // 加密
                const pwd = key.encrypt(this.RegisterForm.pwd)
                param.pwd = pwd
                param.KeyID = id
                user.Register(param).then(r=>{
                  if (r.data.status === '200'){
                    loading.close()
                    this.$message({
                      message: '注册成功',
                      type: 'success'
                    });
                  }
                })
              })
            } else {
              loading.close()
              this.$message.error('注册失败！账号已存在');
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.RegisterForm /deep/ .el-form-item .el-form-item__label{
  color: white;
}
.RegisterForm /deep/ .el-form-item .el-form-item__label::before {
  content: '';
}

.el-form {
  margin-top: 30px;
  margin-left: 30px;
}

.el-form-item {
  margin-bottom: 20px;
}

.RegisterBtn .el-button {
  display: inline-block;
  width: 100%;
}

.RegisterBtn /deep/ .el-form-item__content {
  margin-left: 0 !important;
}

</style>